<template>
  <div class="kxz-kfjk">
    <header class="header">
      <el-form :inline="true" class="datepicker">
        <el-form-item label="月数据统计：">
          <el-date-picker v-model="dateDur" type="daterange" placeholder="选择日期范围" class="dpInput">
          </el-date-picker>
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-button v-if="cuPower < 2" class="link" @click="$router.push('/personnal-manage/cusMon-log')">查询日志</el-button>
      <div>
        <el-button v-for="item in cuSelGroups" :key="item[0]" :class="selGroup === item[0] ? 'active' : ''" @click="handleSelGroup(item[0])"  v-text="item[1]"></el-button>
      </div>
    </header>
    <main>
      <section class="container" v-if="0">
        <h2 class="sj-title">
          <i class="icon icon-cq"></i>出勤数据
        </h2>
        <div class="tableConatiner">
          <table class="sj-content">
            <tr v-for="(rowData,rIndex) in workList" :key="rIndex">
              <td v-for="(item, index) in rowData" :key="index">
                <span :class="selGroup !== 'YW' && rIndex === 5 && typeof item !== 'string' ? 'check' : ''" @click="handleCheck(rIndex,workList[0][index],item !== undefined ? item.kfid :'')">{{selGroup !== 'YW' && rIndex === 5 && typeof item !== 'string' ? item.text : item}}</span>
              </td>
            </tr>
          </table>
          <div class="emptyTip" v-if="workList.empty">
            <span>暂无记录</span>
          </div>
        </div>
      </section>
      <section class="container" v-if="0">
        <h2 class="sj-title">
          <i class="icon icon-yw"></i>业务数据</h2>
        <div class="tableContainer">
          <table class="sj-content">
            <tr v-for="(rowData,rIndex) in ywList" :key="rIndex">
              <td v-for="(item, index) in rowData" :key="index" v-text="Number.parseInt(item, 10) !== 0 ? item : 0"></td>
            </tr>
          </table>
          <div class="emptyTip" v-if="ywList.empty">
            <span>暂无记录</span>
          </div>
        </div>
      </section>
      <section class="container">
        <h2 class="sj-title">
          <i class="icon icon-yw"></i>登录日志</h2>
        <el-form :inline="true" :model="dlrzChart" class="dlrz__pickHeader">
          <el-form-item label="选择日期">
            <el-date-picker v-model="dlrzChart.date" type="date" placeholder="选择日期" @change="handleDlrzSearch"></el-date-picker>
          </el-form-item>
          <el-form-item label="选择客服">
            <el-select v-model="dlrzChart.kf.value" placeholder="请选择客服" @change="handleDlrzSearch">
              <el-option
                v-for="item in dlrzChart.kf.opts"
                :key="item.id"
                :label="item.UserName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="登录时长">
            <span class="dlrz__dur"></span>
          </el-form-item>
        </el-form>
        <div class="dlrz__chartBox">
          <div class="line" ref="dlrz__line"></div>
        </div>
      </section>
      <section class="container" v-if="0">
        <h2 class="sj-title" v>
          <i class="icon icon-dl"></i>登录数据</h2>
        <div class="tableContainer">
          <table class="sj-content">
            <tr v-for="(rowData,rIndex) in dlrzList" :key="rIndex">
              <td v-for="(item, index) in rowData" :key="index" v-text="item"></td>
            </tr>
          </table>
          <div class="emptyTip" v-if="dlrzList.empty">
            <span>暂无记录</span>
          </div>
        </div>
      </section>
      <section class="container">
        <h2 class="sj-title">
          <i class="icon icon-yw"></i>在线处理数据</h2>
        <div class="imgs">
          <p class="imgs__header" v-if="cuPower !== 3">
            <el-upload
              ref="uploadImg"
              accept="image/*"
              list-type="picture"
              :action="uploadUrl"
              :data="cuUploadData"
              name="userfile"
              :before-upload="beforeUpload"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :multiple="false"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="handleSubmitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
          </p>
          <h3 class="imgs__title">历史记录</h3>
          <div class="imgs__area">
            <template v-if="imgs.length > 0">
              <dl class="imgs__item" v-for="(img,index) in imgs" :key="index" @click="handleSelImg(img.path)">
                <dt><img :src="img.path"></dt>
                <dd>{{img['name'] | fltImgName}}</dd>
              </dl>
            </template>
            <div class="empty" v-else>
              暂无数据
            </div>
          </div>
          <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="cuImgTotal" @current-change="handleChangePage">
          </el-pagination>
        </div>
      </section>
      <el-dialog :visible.sync="dialogImgVisible" :show-close="false" custom-class="dialogImg">
        <div class="dialogImg__container">
          <img style="width:100%;" :src="selImg">
        </div>
      </el-dialog>
      <myd :PkfName="kfName" :PsDialog="sDialog" :PmydData="mydData" @oncloseDialog="revCloseDialog"></myd>
    </main>
  </div>
</template>

<script>
import Myd from '../../../../components/myd'
import { dateFormat, Blur } from 'vux'

export default {
  name: 'customer-monitor',
  data() {
    const workList = this._initWorkist()
    const dlrzList = this._initDLlist()
    const dateDur = this._initDateDur()
    // const uploadUrl = 'http://36.7.138.114:5026/css/loadFile/uploadQn.do'
    // const uploadUrl = 'http://192.168.3.27:8080/css/loadFile/uploadQn.do'
    // const uploadUrl = 'http://192.168.22.36:8080/css/loadFile/uploadQn.do'
    //正式
    const uploadUrl = 'http://report.wsloan.com:8888/css/loadFile/uploadQn.do'
    const {userGroup,power} = this.$store.getters.getUserInfo
    const selGroup = power === 1? 'YW': this._gCn2gEn(userGroup)
    // echarts 配置项
    const getStatus = function(s){
      switch (s) {
        case 0:
          return '离线'
        case 1:
          return '在线'
        case 2:
          return '暂离'
        case 3:
          return '培训'
        case 4:
          return '开会'
        case 5:
          return '就餐'
      }
    }
    const chartOptions = {
      title: {
        text: '登录日志'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        formatter: function(params) {
          let data = params.data || [0, 0]
          let hour = Number.parseInt(data[0],10)
          let min = Number.parseInt((data[0] - hour) * 60)
          min = min < 10 ? ('0'+ min) : min
          return `时间：${hour}:${min}，${getStatus(data[1])}`
        }
      },
      legend: {
        data: ['登录日志'],
        right:20,
        top:20,
      },
      xAxis: {
        type: 'value',
        min: 8,
        max: 21,
        interval: 1,
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: '{value}点'
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 5,
        splitNumber: 6,
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: function(value, index) {
            return getStatus(value)
          }
        }
      },
      series: [{
        name: '登录日志',
        type: 'line',
        step: 'end',
        data: []
      }]
    }
    const chartDate = dateFormat(new Date(), 'YYYY-MM-DD')
    const chartKfVal = this.$store.getters.getUserInfo.id
    // const kfOpts = power === 1 ? this.$store.getters.getKf : this.$store.getters.getCurGroup
    const kfOpts = this.$store.getters.getKf
    return {
      _wselGroupName: 'kfgl_kfjk_selGroup',
      selImg:'',
      selGroup,
      dateDur,
      dlrzList,
      workList,
      ywList: { empty: true },
      kfName: '',
      sDialog: false,
      mydData: {},
      uploadUrl,
      imgs: [],
      pageSize: 10,
      page: 1,
      dialogImgVisible:false,
      chartIns:null,  // echarts实例
      chart:{
        ins:null,
        baseOptions:chartOptions,
        data:[]    //  实际数据
      },
      dlrzChart:{
        date:chartDate,
        kf:{
          value:chartKfVal,
          opts:kfOpts
        }
      }
    }
  },
  computed: {
    cuPower(){
      return this.$store.getters.getUserInfo.power
    },
    cuGroupEN() {
      const group = Object.assign({}, this.$store.getters.getGroup)
      const flag = this._isEmptyObj(group)
      if (!flag) {
        for (let key in group) {
          let prop = ''
          if (group[key] === '业务组') {
            prop = 'YW'
          } else if (group[key] === '答疑组') {
            prop = 'DY'
          } else if (group[key] === '回访组') {
            prop = 'HF'
          }
          group[prop] = key
        }
      }
      return group
    },
    cuUploadData() {
      const { sessionId } = this.$store.getters.getUserInfo
      return {
        sessionId
      }
    },
    cuImgTotal(){
      const imgs = this.imgs
      return imgs.length
    },
    cuSelGroups(){
      const {userGroup,power} = this.$store.getters.getUserInfo
      // const selGroup = this.selGroup
      if(power === 1){
        return [
          ['YW','业务组'],
          ['DY', '答疑组'],
          ['HF', '回访组'],
        ]
      }else{
        const selEN = this._gCn2gEn(userGroup)
        return [
          [selEN, userGroup]
        ]
      }
    }
  },
  filters: {
    fltImgName(val) {
      return val.replace(/\.png$/, '')
    }
  },
  components: {
    Myd,
    Blur,
  },
  watch: {
    dateDur(val) {
      let flag = false
      val.some(item => {
        if(item === null){
          flag = true
        }
      })
      if(flag){
        this.$toast({
          message:'请填选有效日期段'
        })
        return
      }
      const gType = this.selGroup
      // 获取出勤数据
      // this.getWorkData()

      if (gType === 'YW' || gType === 'HF') {
        // this.getYwData()
      }

      // 获取登录日志数据
      this.getDlrzData()
    },
    'chart.data'(val){
      const cbaseOptions = this.chart.baseOptions
      if(val.length > 0){
        const cins = this.chart.ins
        cbaseOptions.series[0].data = val
        cins.setOption(cbaseOptions)
      }
    }
  },
  mounted() {
    // 从localStorage中读取-实现记忆读取
    const gType = this.selGroup
    if (gType === 'YW') {
      this.ywList = this._initYWZlist()
    } else if (gType === 'HF') {
      this.ywList = this._initHFZlist()
    }
    // 获取出勤数据
    // this.getWorkData()

    if (gType === 'YW' || gType === 'HF') {
      // 获取业务数据
      //this.getYwData()
    }
    // 获取登录日志数据
    // this.getDlrzData()

    // 获取对应组别图片信息
    this.getImgs()

    // 初始化echarts实例
    
    const lineEl = this.$refs['dlrz__line']
    this.chart.ins = this.$echarts.init(lineEl)
    this.getDlrz()
  },
  methods: {
    revCloseDialog() {
      this.sDialog = false
    },
    handleCheck(i, userName, adminid) {
      const gType = this.selGroup
      if (gType !== 'YW' && i === 5 && userName !== '名字') {
        this.sDialog = true
        this.kfName = userName
        this.getMyd(adminid)
      }
      return false
    },
    handleSelGroup(gType) {
      if (gType === this.selGroup) {
        return
      }
      this.selGroup = gType
      this.getDlrzData()
      // 获取出勤数据
      // this.getWorkData()
      if (gType === 'YW' || gType === 'HF') {
        //this.getYwData()
      }
    },
    // 登录日志搜索
    handleDlrzSearch(val){
      if(val === undefined){
        return
      }
      this.getDlrz()
    },
    // 上传图片相关
    handleSubmitUpload() {
      this.$refs.uploadImg.submit()
    },
    handleChangePage(curPage){
      this.page = curPage
      this.getImgs()
    },
    handleSelImg(url){
      if(url !== ''){
        this.dialogImgVisible = true
        this.selImg = url
      }else{
        this.$toast({
          message:'没有图片，无法展示'
        })
      }
    },
    beforeUpload(){
      this.$vux.loading.show({
      text: '图片正飞往服务器'
     })
    },
    uploadSuccess(data) {
      if (data.state === 0) {
        this.$vux.loading.hide()
        this.$toast({
          message: '文件上传成功'
        })
        this.getImgs()
      }else{
        console.log(data)
        this.$warn('文件上传失败')
      }
    },
    uploadError(err) {
      this.$warn('系统loadFile/uploadQn.do接口报错')
    },
    //
    _isEmptyObj(o) {
      if (Object.prototype.toString.call(o) === '[object Object]' && Object.keys(o).length === 0) {
        return true
      }
      return false
    },
    _initWorkist() {
      const workList = []
      const selGroup = this.selGroup
      const l = selGroup === 'YW' ? 5 : 6
      workList.empty = true
      for (let i = 0; i < l; i++) {
        let title = ''
        switch (i) {
          case 0:
            title = '名字'
            break
          case 1:
            title = '出勤'
            break
          case 2:
            title = '晚班天数'
            break
          case 3:
            title = selGroup === 'YW' ? '在线时长' : '电话接入量'
            break
          case 4:
            title = '电话呼出量'
            break
          default:
            title = '客户满意度'
        }
        workList[i] = [title, '无']
      }
      return workList
    },
    _initDLlist() {
      const dlrzList = []
      dlrzList.empty = true
      for (let i = 0, l = 5; i < l; i++) {
        let title = '';
        switch (i) {
          case 0:
            title = '名字'
            break
          case 1:
            title = '登录时间'
            break
          case 2:
            title = '登录IP'
            break
          case 3:
            title = '登出时间'
            break
          default:
            title = '登录时长'
            break
        }
        dlrzList[i] = [title, '无']
      }
      return dlrzList
    },
    _initYWZlist() {
      const tmpa = []
      tmpa.empty = true
      for (let i = 0, l = 5; i < l; i++) {
        let title = '';
        switch (i) {
          case 0:
            title = '名字'
            break
          case 1:
            title = '负责客户人数'
            break
          case 2:
            title = '成功投资人数'
            break
          case 3:
            title = '投资金额'
            break
          default:
            title = '提成'
            break
        }
        tmpa[i] = [title, '无']
      }
      return tmpa
    },
    _initHFZlist() {
      const tmpa = []
      tmpa.empty = true
      for (let i = 0, l = 6; i < l; i++) {
        let title = '';
        switch (i) {
          case 0:
            title = '名字'
            break
          case 1:
            title = '所属客户人数'
            break
          case 2:
            title = '客户投资金额'
            break
          case 3:
            title = '续投率'
            break
          case 4:
            title = '流失金额'
            break
          default:
            title = '流失率'
            break
        }
        tmpa[i] = [title, '无']
      }
      return tmpa
    },
    _date2str(date) {
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    },
    _index2PropByYW(i) {
      let prop
      switch (i) {
        case 0:
          prop = 'UserName'
          break
        case 1:
          prop = 'fprs'
          break
        case 2:
          prop = 'cgrs'
          break
        case 3:
          prop = 'tzze'
          break
        case 4:
          prop = 'outTime'
          break
        default:
          prop = 'time'
          break
      }
      return prop
    },
    _index2PropByHF(i) {
      let prop
      switch (i) {
        case 0:
          prop = 'UserName'
          break
        case 1:
          prop = 'fprs'
          break
        case 2:
          prop = 'tzze'
          break
        case 3:
          prop = 'xtje'
          break
        case 4:
          prop = 'lsje'
          break
        default:
          prop = 'lsl'
          break
      }
      return prop
    },
    _gCn2gEn(cn){
      // 因为中文名不会变，groupId可能会变
      switch(cn){
        case '业务组':
          return 'YW'
        case '回访组':
          return 'HF'
        case '答疑组':
          return 'DY'
      }
    },
    _initDateDur() {
      const dateObj = new Date()
      return [dateObj, dateObj]
    },
    async getDlrz(){
      let {date,kf} = this.dlrzChart
      let kfid = kf.value
      if(typeof date !== 'string'){
        date = dateFormat(date,'YYYY-MM-DD')
      }
      // 模拟
      try{
        const {data} = await this.$get(this,{
          api:'user/getTimeDuan.do',
          data:{
            kfid,
            date
          }
        })
        if(data.state === 0){
          let tmpa = []
          if(data.content.length > 0){
            data.content.forEach((item,index) => {
              const curHour = new Date(item.timepoint).getHours()
              const curMins = new Date(item.timepoint).getMinutes()
              const time = parseFloat((curHour + curMins / 60).toFixed(3))
              // const time = parseFloat((curHour + curMins / 60))
              // const time = curHour + ':' + curMins
              // const time = item.timepoint
              if(index === 0 && curHour > 8){
                tmpa.push([8,0])
              }
              tmpa.push([time, item.nstate])
            })
            // 尾处理（如果尾部数据没有的话）
            const last = tmpa[tmpa.length - 1]
            if(last[0] < 21){
              if(last[1] > 0){
                tmpa.push([last[0],0],[21,0])
              }else{
                tmpa.push([21,0])
              }
            }
          }else{
            tmpa = [[8,0],[21,0]]
          }
          this.chart.data = tmpa
          return
        }
        this.$warn(data.message)
      }catch(e){
        // this.$warn('系统user/getTimeDuan.do接口报错')
        // this.$warn('user/getTimeDuan.do:',e.message)
        console.log('user/getTimeDuan.do:',e.message)
      }
    },
    async getMyd(adminid) {
      try {
        const { data } = await this.$get(this, {
          api: 'ajaxapi/mydtj.do',
          data: {
            adminid,
            fff: 1
          }
        })
        if (data.state === 0) {
          this.mydData = data.content
        }
      } catch (e) {
        this.$warn('系统ajaxapi/mydtj.do接口报错')
      }
    },
    async getWorkData() {
      try {
        const gType = this.selGroup
        const seDate = this.dateDur
        let params = null
        const groupEN = this.cuGroupEN
        if (this._isEmptyObj(groupEN)) {
          return
        }
        const userGroupId = groupEN[gType]
        if (seDate && seDate.length) {
          params = {
            sDate: this._date2str(seDate[0]),
            eDate: this._date2str(seDate[1]),
            userGroupId
          }
        } else {
          return
        }
        const { data } = await this.$get(this, {
          api: 'order/workDay.do',
          data: params
        })
        let workList = this._initWorkist()
        if (data.state === 1 || data.content.length === 0) {
          this.workList = workList
          return
        }
        data.content.forEach((work, woIndex) => {
          workList.map((wItem, wIndex) => {
            let prop
            switch (wIndex) {
              case 0:
                prop = 'kfName'
                break
              case 1:
                prop = 'bban'
                break
              case 2:
                prop = 'wanban'
                break
              case 3:
                prop = gType === 'YW' ? 'zxsc' : 'jrl'
                break
              default:
                prop = 'hcl'
                break
            }
            if (woIndex === 0) {
              workList[wIndex].pop()
            }
            const puItem = gType !== 'YW' && wIndex === 5 ? { text: '查看', kfid: work.kfid } : work[prop]
            workList[wIndex].push(puItem)
          })
        })
        workList.empty = false
        this.workList = workList
      } catch (e) {
        this.$warn('系统order/workDay.do报错')
      }
    },
    async getDlrzData() {   // 获取登录日志数据
      try {
        const groupEN = this.cuGroupEN
        const gType = this.selGroup
        if (this._isEmptyObj(groupEN)) {
          return
        }
        const userGroupId = groupEN[gType]
        // const { data } = await this.$get(this, {
        //   api: 'user/findAllIp.do',
        //   data: {
        //     userGroupId
        //   }
        // })
        let dlrzList = this._initDLlist()
        if (data.state === 1 || data.content.length === 0) {
          this.dlrzList = dlrzList
          return
        }
        data.content.forEach((dlrz, dlIndex) => {
          dlrzList.map((dItem, dIndex) => {
            let prop
            switch (dIndex) {
              case 0:
                prop = 'uName'
                break
              case 1:
                prop = 'inTime'
                break
              case 2:
                prop = 'ip'
                break
              case 3:
                prop = 'outTime'
                break
              default:
                prop = 'time'
                break
            }
            if (dlIndex === 0) {
              dlrzList[dIndex].pop()
            }
            dlrzList[dIndex].push(dlrz[prop])
          })
        })
        dlrzList.empty = false
        this.dlrzList = dlrzList
      } catch (e) {
        // this.$warn('系统user/findAllIp.do接口报错')
      }
    },
    async getYwData() {   // 获取业务组业务数据
      try {
        const gType = this.selGroup
        const seDate = this.dateDur
        let params = null
        const groupEN = this.cuGroupEN
        if (this._isEmptyObj(groupEN)) {
          return
        }
        const userGroupId = groupEN[gType]
        if (seDate && seDate.length) {
          params = {
            sDate: this._date2str(seDate[0]),
            eDate: this._date2str(seDate[1]),
            userGroupId
          }
        } else {
          return
        }
        const { data } = await this.$get(this, {
          api: 'report/findall.do',
          data: params
        })
        const ywList = gType === 'YW' ? this._initYWZlist() : gType === 'HF' ? this._initHFZlist() : null
        if (data.state === 1 || data.content.length === 0) {
          this.ywList = ywList
          return
        }
        data.content.forEach((yw, ywIndex) => {
          ywList.map((yItem, yIndex) => {
            const prop = gType === 'YW' ? this._index2PropByYW(yIndex) : gType === 'HF' ? this._index2PropByHF(yIndex) : null
            if (ywIndex === 0) {
              ywList[yIndex].pop()
            }
            ywList[yIndex].push(yw[prop])
          })
        })
        ywList.empty = false
        this.ywList = ywList
      } catch (e) {
        // this.$warn('系统report/findall.do报错')
      }
    },
    async getImgs() {
      try {
        const { userGroupId } = this.$store.getters.getUserInfo
        const pageSize = this.pageSize
        const page = this.page
        const { data } = await this.$get(this, {
          api: 'loadFile/loadQnPicture.do',
          data: {
            groupId: userGroupId,
            pageSize,
            page
          }
        })
        if (data.state === 0) {
          this.imgs = data.content
        }
      } catch (e) {
        //this.$warn('系统loadFile/loadQnPicture.do接口报错')
      }
    }
  }
}
</script>

<style lang="scss">
.kxz-kfjk {
  .datepicker {
    .el-form-item__label {
      font-size: 16px;
      color: #444;
    }
    .el-date-editor {
      width: 260px;
      height: 40px;
    }
  }
  .check {
    color: #5394fc;
    border-bottom: 1px solid #5394fc;
    cursor: pointer;
  }
  .el-button {
    $btnDftBgColor: #ecf0f3;
    $btnDftColor: #bac2cb;
    $btnChgBgColor: #5394fc;
    $btnChgColor: #fff;
    padding: 11px 29px;
    color: $btnDftColor;
    background: $btnDftBgColor;
    border: none;
    &:hover {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
    &.active {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
  }
  // 跳转样式
  .header{
    position:relative;
  }
  .link{
    position:absolute;
    top:20px;
    right:100px;
    background:#5394fc;
    color:#fff;
    &:hover{
      opacity:.8;
    }
  }
  //
  .container {
    $bdColor: #bac2cb;
    $color: #444;
    position: relative;
    background: #fff;
    margin-top: 20px;
    .icon {
      display: inline-block;
      width: 28px;
      height: 28px;
      transform: translateY(8px);
      margin-right: 9px;
      &.icon-cq {
        background-image: url(../../images/icon-cq.png);
      }
      &.icon-yw {
        background-image: url(../../images/icon-yw.png);
      }
      &.icon-dl {
        background-image: url(../../images/icon-dl.jpg);
      }
    }
    .sj-title {
      line-height: 35px;
      padding: 25px;
      border: 1px solid $bdColor;
      border-bottom: none;
      color: $color;
      font-size: 18px;
    }
    .sj-content {
      width: 100%;
      border-top: 1px solid $bdColor;
      border-left: 1px solid $bdColor;
      table-layout: fixed;
      td {
        box-sizing: border-box;
        border-right: 1px solid $bdColor;
        border-bottom: 1px solid $bdColor;
        text-align: center;
        font-size: 14px;
        color: $color;
        line-height: 60px;
        &:first-child {
          width: 250px;
        }
      }
    }
    .emptyTip {
      position: absolute;
      top: 92px;
      right: 1px;
      bottom: 1px;
      left: 251px;
      z-index: 6;
      background-color: #fff;
      color: $color;
      font-size: 22px;
      font-weight: 600;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .tableContainer {
    width: 100%;
    overflow-x: auto;
  }
  .imgs {
    padding: 0 25px;
    border: 1px solid #bac2cb;
  }
  .imgs__title{
    padding:8px 0;
  }
  .imgs__header {
    padding: 10px 0;
  }
  .imgs__area {
    zoom: 1;
    margin: 10px auto;
    &::after {
      content: ".";
      display: block;
      width: 0;
      height: 0;
      visibility: hidden;
      clear: both;
    }
  }
  .imgs__item {
    width: 20%;
    float: left;
    margin: 0 20px 20px 20px;
  }
  dl {
    img {
      width: 100%;
      height:100%;
    }
    dt {
      height:140px;
      line-height: 0;
    }
    dd {
      padding: 8px 0;
      text-align: center;
    }
  }
  .dialogImg{
    .el-dialog__header{
      padding:0;
    }
  }
  .el-pagination{
    text-align:right;
  }

  // 登陆日志表格相关样式
  .dlrz__pickHeader{
    padding:25px;
    padding-bottom:0;
    text-align:right;
    border:1px solid #bac2cb;
    border-bottom:none;
  }
  .dlrz__dur{
    display: inline-block;
    width:150px;
  }
  .dlrz__chartBox{
    box-sizing:border-box;
    width:100%;
    height:400px;
    padding:10px 25px;
    border:1px solid #bac2cb;
    .line{
      width:100%;
      height:100%;
    }
  }
}
</style>
